<ion-header>
    <ion-toolbar mode="ios" color="care">
        <ion-buttons slot="start">
            <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>{{ 'Personal center' | translate }}</ion-title>
    </ion-toolbar>

    <div class="flex-ver-cnt-cnt care-color" padding>
        <ion-thumbnail class="avatar-container" (click)="selectImg()">
            <ion-img [src]="avatarUrl || '/assets/img/iconheadimg.png'"></ion-img>
        </ion-thumbnail>
        <ion-text color="light">
            <h4>{{personName}}</h4>
        </ion-text>
    </div>
</ion-header>
<ion-content>
    <ion-list lines="full">
        <ion-list-header>{{ 'Infos' | translate}}</ion-list-header>

        <!--<ion-item detail (click)="toInfoEdit('name')">
            <ion-text color="danger" slot="start">*</ion-text>
            <ion-label>{{ 'Name' | translate }}</ion-label>
            <ion-text color="medium" slot="end">{{personName}}</ion-text>
        </ion-item>-->

        <ion-item detail (click)="toInfoEdit('englishName')">
            <ion-text color="danger" slot="start">*</ion-text>
            <ion-label>{{ 'EnglishName' | translate }}</ion-label>
            <ion-text color="medium" slot="end">{{englishName}}</ion-text>
        </ion-item>

        <ion-item detail (click)="selectGender()">
            <ion-text color="danger" slot="start">*</ion-text>
            <ion-label>{{ 'Sex' | translate }}</ion-label>
            <ion-text color="medium" slot="end">{{personSex | translate}}</ion-text>
        </ion-item>

        <ion-item detail (click)="toInfoEdit('age')">
            <ion-text color="danger" slot="start">*</ion-text>
            <ion-label>{{ 'Age' | translate }}</ion-label>
            <ion-text color="medium" slot="end">{{personAge}}</ion-text>
        </ion-item>

        <ion-item lines="full" detail (click)="toInfoEdit('phone')">
            <ion-text color="danger" slot="start">*</ion-text>
            <ion-label>{{ 'PhoneNumber' | translate }}</ion-label>
            <ion-text color="medium" slot="end">{{personTel}}</ion-text>
        </ion-item>

        <ion-item lines="full" detail (click)="toInfoEdit('email')">
            <ion-text color="danger" slot="start">*</ion-text>
            <ion-label>{{ 'Email' | translate }}</ion-label>
            <ion-text color="medium" slot="end">{{personEmail}}</ion-text>
        </ion-item>

        <ion-item detail (click)="toInfoEdit('passport')">
            <ion-text color="danger" slot="start">*</ion-text>
            <ion-label>{{ 'Passport' | translate }}</ion-label>
            <ion-text color="medium" slot="end">{{passport}}</ion-text>
        </ion-item>

        <ion-item lines="full" detail (click)="toInfoEdit('MH')">
<!--            <ion-text color="danger" slot="start">*</ion-text>-->
            <ion-label>{{ 'MedicalHistory' | translate }}</ion-label>
            <ion-text color="medium" slot="end">{{'Details' | translate}}</ion-text>
        </ion-item>

        <ion-item lines="full" detail (click)="toInfoEdit('DD')">
<!--            <ion-text color="danger" slot="start">*</ion-text>-->
            <ion-label>{{ 'DiseaseDescription' | translate }}</ion-label>
            <ion-text color="medium" slot="end">{{'Details' | translate}}</ion-text>
        </ion-item>
    </ion-list>
</ion-content>
